<template>
	<view class="login_content">
		<u--form labelPosition="left" :model="userForm" :rules="rules" ref="form1">
			<u-form-item label="账号" prop="account" borderBottom ref="item1">
				<u--input v-model="userForm.account" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item1">
				<u--input v-model="userForm.password" border="none"></u--input>
			</u-form-item>
			<u-form-item>
				<view style='text-align: center;'>没有账号？<span style='color: slateblue; cursor: pointer;'
						@click='reguserFn'>去注册</span></view>
			</u-form-item>
			<u-form-item>
				<u-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" size="small" text="登录"
					@click="loginFn"></u-button>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userForm: {
					account: '',
					password: ''
				},
				rules: {
					account: [{
							type: 'string',
							required: true,
							message: '请输入账号',
							trigger: ['blur', 'change']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字'
						},
						// 6-8个字符之间的判断
						{
							min: 6,
							max: 12,
							message: '长度在6-12个字符之间'
						},
					]
				}
			};
		},
		onLoad(option) {
			this.userForm.account = option.account
			this.userForm.password = option.password
			// console.log(option);
			// console.log(option.userForm);
		},
		methods: {
			async loginFn() {
				try {
					const res = await this.$request({
						method: 'post',
						url: '/api/login',
						data: {
							username: this.userForm.account,
							password: this.userForm.password
						}
					})
					uni.switchTab({
						url: '/pages/index/index'
					});
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			reguserFn() {
				uni.redirectTo({
					url: './reguser'
				});
			}
		},

	}
</script>

<style lang="scss">
	.login_content {
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
